<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>车辆添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<script type="text/javascript" src="lib/loading/okLoading.js"></script>
<style>
.imgs {
	display: none;
}

.picture {
	display: none;
}
</style>

</head>
<body>

	<div class="x-body">
		<form class="layui-form layui-form-pane"
			action="${pageContext.request.contextPath}/CarServlet" id="add"
			method="post" >
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
					<!-- 隐藏域 -->
						<input type="hidden" name="op" value="add">
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>车主名字
							</label>
							<div class="layui-input-block">
								<input type="text" name="carUserName" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>车牌号
							</label>
							<div class="layui-input-block">
								<input type="text" name="carCard" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>车主电话
							</label>
							<div class="layui-input-block">
								<input type="text" name="carPhone" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>房间号
							</label>
							<div class="layui-input-block">
								<input type="text" name="roomNo" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						</div>

						<div class="layui-form-item">
							<button class="layui-btn" type="sumbit" >添加车辆</button>
						</div>

						<div style="height: 100px;"></div>
					</div>

			</div>
		</form>
	</div>

	<!-- 引入jQuery库 -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/back/js/jquery-3.6.0.js"></script>
	<!-- 引入jQuery-form -->
	<script type="text/javascript" src="js/jquery-form.js"></script>

	<script>
	//对指定的表单绑定提交事件
	
    $("#add").submit(function(){
    	//遗留问题，扁担提交之前应该对输入框进行校验，目前我们只是简单必填属性require
    	//..
    	//使用JQuery.form.js插件方法ajaxSubmit()异步提交表单
    	$(this).ajaxSubmit(function(result){//result请求的数据结果
    		
    		layui.use('layer',function () {
    			console.log("进的来");
    			if(result.status!=0){
    				//添加商品成功
    				layer.msg(result.message,{icon:1,time:5000});
    				//定时器
    				window.setTimeout(function(){
    					//关闭子窗口
    					var index=parent.layer.getFrameIndex(window.name);
    					parent.layer.close(index);
    					//调用首页的查询方法
    					window.parent.car_search_page();
    				},5000);
    			}else{
    				//添加商品出错
    				layer.msg(result.message,{icon:5,time:5000});
    			}
    			
    		});
    		
    	});
    	//限制默认的表单提交
    	return false;
    });

		
		
		

	</script>


	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>
	

	<script>
		layui.use([ 'element', 'layer', 'form' ], function() {
			$ = layui.jquery;//jquery
			lement = layui.element();//面包导航
			layer = layui.layer;//弹出层
			form = layui.form();
			okLoading.close($);
			form.render();

			//图片上传接口
			/*layui.upload({
			  url: './upload.json' //上传接口
			  ,success: function(res){ //上传成功后的回调
			      console.log(res);
			    $('#LAY_demo_upload').attr('src',res.url);
			  }
			});*/

			//监听提交
			form.on('submit(add)', function(data) {
				var veh_hphm = $("input[name='veh_hphm']").val();
				var veh_color = $("input[name='veh_color']").val();
				var image = $("input[name='image']").val();
				var community_id = $('#community_id option:selected').val();//所属栏目ID
				var personnel_id = $('#personnel_id option:selected').val();//所属栏目ID

				if (community_id == "") {
					layer.msg('所属小区不能为空', {
						icon : 5,
						time : 2000
					});
					return false;
				}
				if (personnel_id == "") {
					layer.msg('所属成员不能为空', {
						icon : 5,
						time : 2000
					});
					return false;
				}
				if (veh_hphm == "") {
					layer.msg("车牌号码不能为空！", {
						icon : 5,
						time : 2000
					});
					return false;
				}
				if (veh_color == "") {
					layer.msg("号牌颜色不能为空！", {
						icon : 5,
						time : 2000
					});
					return false;
				}
				if (image == "") {
					layer.msg("车辆图片不能为空！", {
						icon : 5,
						time : 2000
					});
					return false;
				}
				var data = data.field;
				$.ajax({
					type : "post",
					url : "CarServlet",
					data : data,
					dataType : "json",
					success : function(data) {
						if (data.status == 1) {
							layer.msg(data.info, {
								icon : 6,
								time : 2000
							}, function() {
								window.parent.location.reload();
								var index = parent.layer
										.getFrameIndex(window.name);
								parent.layer.close(index);
							});
							return false;

						} else {
							layer.msg(data.info, {
								icon : 5,
								time : 2000
							});
							return false;
						}
					}

				});

			});

			form.on('select(aihao)', function(data) {
				communidy();
			});
			$(function() {
				communidy();
			});
			//communidy();
			function communidy() {
				var communidy = $("#community_id").val();
				$.ajax({
					url : "CarServlet",
					type : "post",
					dataType : "json",
					data : {
						communidy : communidy
					},
					success : function(data) {
						var dlen = data.length;
						var str = '';
						if (dlen > 0) {
							for (var i = 0; i < dlen; i++) {
								var dt = data[i];
								str += '<option value="' + dt.id + '">';
								str += dt.member_name;
								str += '</option>';
							}
						} else {
							str += '<option value="">----暂无数据----</option>';
						}

						$("#personnel_id").html(str);
						form.render('select', 'aihao');

					}
				})
			}

		})
	</script>
	<!--栏目缩略图上传-->
	<script>
		function upload(obj, id) {
			var formData = new FormData();
			formData.append('images', $('#previewImg')[0].files[0]);
			formData.append('id', id);//将id追加再id中
			//console.log(formData);
			layer.msg('图片上传中', {
				icon : 16
			});
			$.ajax({
				type : "post",
				processData : false,
				contentType : false,
				url : "CarServlet",
				data : formData,
				success : function(data) {
					if (data.status == 1) {
						layer.closeAll('loading');
						//layer.msg(data.info,{icon:1,time:1000});
						$("#pimages").attr('src', data.image_name);
						$("#avatar").val(data.image_name);
						$(".imgs").show();
						return false;
					} else {
						layer.msg(data.info, {
							icon : 2,
							time : 1000
						});
					}
				}
			});
		}
	</script>

</body>
</html>